import React, { useRef, useState } from 'react'
import RenewalModal from './components/RenewalModal'
import {
  ic_upgrade,
  ic_arrow,
  ic_bed,
  ic_medicine,
  ic_phone,
  header_banner,
  header_bg,
  ic_ok,
  ic_ok_lg,
  ic_guide,
  ic_sm_hospital,
  ic_sm_medicine,
  ic_sm_operation,
  ic_md_medicine,
  ic_md_method,
  ic_md_ok,
  ic_close
} from '@/utils/loadImages'
import './index.scss'
import { API } from '../redCard/common/api'
import { Toast } from 'antd-mobile'
import Upgrade from '@/components/Upgrade'

const RedCardRenewal = () => {
  const [idNo, setIdNo] = useState('')
  const [list, setList] = useState([])
  const [visible, setVisible] = useState(false)

  const submit = async () => {
    const [code, data] = await API.post('/insurance/renew/getpolicy', {
      applicant: {
        name: 'string',
        mobile: '15945678911',
        idNo
      },
      origin: 'tiancai'
    })
    if (code === 200) {
      setList(data?.policys || [])
      setVisible(true)
    } else {
      Toast.info('数据请求出错，请重试!')
    }
  }

  const modalRef = useRef<any>()
  return (
    <div className="red-card-renewal-page">
      <div className="body">
        <div
          className="header"
          style={{ background: `url(${header_bg}) 50% 0% / contain no-repeat` }}>
          <h2>惠军家庭医疗保险服务卡</h2>
          <h3>您为我们守护国家 我们为您守护小家</h3>
          <img src={header_banner} alt="" />
        </div>
        <div className="content">
          <div className="card">
            <h2 className="section_title">投保人</h2>
            <div className="renewal">
              <label>投保人身份证号：</label>
              <div className="renewal_input">
                <input value={idNo} onInput={(e: any) => setIdNo(e.target.value)} />
              </div>
              <span className="form_clear">
                {idNo ? <img src={ic_close} alt="" onClick={() => setIdNo('')} /> : null}
              </span>
            </div>
            <div className="split"></div>
            <p className="renewal_desc">(请输入投保人身份证号码，选择上一年保单号进行续保)</p>
          </div>

          {/* 保障详情 */}
          <div className="card gradient">
            <h2 className="section_title">保障详情</h2>

            <table className="guaranteeDetails">
              <thead>
                <tr>
                  <th>保险责任</th>
                  <th>免赔额</th>
                  <th>保障金额</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>一般医疗保险金</td>
                  <td>1万元</td>
                  <td>300万元</td>
                </tr>
                <tr>
                  <td>重大疾病医疗保险金</td>
                  <td rowSpan={5} style={{ verticalAlign: 'middle' }}>
                    0元
                  </td>
                  <td>300万元</td>
                </tr>
                <tr>
                  <td>恐性肿瘤质子重离子保险金</td>
                  <td>100万元</td>
                </tr>
                <tr>
                  <td>恶性肿瘤医疗住院津贴</td>
                  <td>18000元</td>
                </tr>
                <tr>
                  <td>重大疾病异地转诊公共交通保险金</td>
                  <td>5000元</td>
                </tr>
                <tr>
                  <td>恶性肿瘤特药保险金（同主险）</td>
                  <td>600万元</td>
                </tr>
                <tr>
                  <td>重大疾病一次性给付（5/10万）保险金</td>
                  <td>可选责任</td>
                  <td>5/10万元</td>
                </tr>
              </tbody>
            </table>
          </div>

          <Upgrade />
          {/* 产品亮点 */}
          <div className="card" style={{ paddingTop: '0' }}>
            <h2 className="card_title">产品亮点</h2>
            <div className="hightlights">
              <div className="hightlights_item">
                <img src={ic_md_medicine} alt="" />
                <p>不限疾病种类</p>
              </div>
              <div className="hightlights_item">
                <img src={ic_md_ok} alt="" />
                <p>不限用药种类</p>
              </div>
              <div className="hightlights_item">
                <img src={ic_md_method} alt="" />
                <p>不限治疗方式</p>
              </div>
            </div>

            <div className="hightlights_list">
              <div className="hightlights_list_item">
                <img src={ic_ok} alt="" />
                医疗费用报销比例100%
              </div>
              <div className="hightlights_list_item">
                <img src={ic_ok} alt="" />
                高额医疗费不用愁<span>可垫付</span>
              </div>
              <div className="hightlights_list_item">
                <img src={ic_ok} alt="" />
                专属理赔团队，报销时效有保障
              </div>
            </div>
          </div>

          {/* 前沿疗法 */}
          <div className="card" style={{ paddingTop: '0' }}>
            <h2 className="card_title">
              <img src={ic_upgrade} className="ic_upgrade" alt="" />
              <span>前沿疗法已纳入保障</span>
            </h2>
            <h3 className="title">
              <span style={{ color: '#FC8F2B' }}>120万</span>一针“癌症清零药”
            </h3>
            <h5 className="subtitle">已纳入保障中</h5>
            <div className="card_orange">
              <div className="card_orange_img">
                <img src={ic_arrow} alt="" />
              </div>
              <div className="card_orange_text">
                国际最先进的car-t细胞疗法，对急性淋巴细胞白血病、多发性骨髓瘤、慢性淋巴细胞白血病，以及部分实体肿瘤和一些骨髓系白血病有显著效果。
              </div>
            </div>
            <div className="card_blue">
              享受 car-t 细胞疗法
              <br />
              给自己一个 “免疫” 癌症的机会
            </div>

            <div className="effect">
              <div className="effect_item">
                <label>效果显著：</label>
                <p>一针即可清除体内癌细胞，可达到治愈效果。</p>
              </div>
              <div className="effect_item">
                <label>价格昂贵：</label>
                <p>120万元，让多数患者望尘莫及。</p>
              </div>
              <div className="effect_item">
                <label>无法报销：</label>
                <p>car-t细胞治疗药物未能进入医保目录，医保无法报销。</p>
              </div>
            </div>
          </div>

          <div className="card" style={{ paddingTop: '0' }}>
            <h2 className="card_title">报销不限疾病种类/治疗方式</h2>
            <div className="guarantee">
              <div>
                <img src={ic_ok} alt="" />
                <span>生病用好药</span>
              </div>
              <div>
                <img src={ic_ok} alt="" />
                <span>理赔范围广</span>
              </div>
            </div>
            <div className="btn_blue">新增百万特药保障</div>
            <table className="table">
              <tr>
                <td>
                  <img src={ic_sm_medicine} alt="" />
                  药品
                </td>
                <td>进口药、自费药、疾病、意外…</td>
              </tr>
              <tr>
                <td>
                  <img src={ic_sm_operation} alt="" />
                  手术
                </td>
                <td>门诊、急诊、住院、门诊放疗、化疗…</td>
              </tr>
              <tr>
                <td>
                  <img src={ic_sm_hospital} alt="" />
                  药品
                </td>
                <td>治疗费、检查费、ICU费用、护理费、床位费、加床费</td>
              </tr>
            </table>
          </div>

          {/* 保障特色 */}
          <div className="card" style={{ paddingTop: '0' }}>
            <h2 className="card_title">保障特色</h2>
            <h3 className="title">全方位升级健康服务</h3>
            <div className="service">
              <div className="service_item">
                <img src={ic_ok_lg} alt="" />
                <span>约号难</span>
              </div>
              <div className="service_item">
                <img src={ic_ok_lg} alt="" />
                <span>排队难</span>
              </div>
              <div className="service_item">
                <img src={ic_ok_lg} alt="" />
                <span>住院手术难</span>
              </div>
              <div className="service_item">
                <img src={ic_ok_lg} alt="" />
                <span>医疗费用难</span>
              </div>
            </div>
            <div className="card_orange">
              <div className="card_orange_img">
                <img alt="" src={ic_guide} />
              </div>
              <div className="card_orange_text lg">
                三家央企承保，踏实放心
                <br />
                专属报销服务通道
                <br />
                全新健康服务升级
                <br />
                异地转诊交通费可报销
                <br />
                恶性肿瘤住院津贴
                <br />
              </div>
            </div>
            <div className="guide">
              <div className="guide_item">
                <img src={ic_phone} alt="" />
                <p className="guide_item_text">电话/视频问诊，重疾优先预约挂号。</p>
              </div>
              <div className="guide_item">
                <img src={ic_bed} alt="" />
                <p className="guide_item_text">
                  重疾住院协调，重疾手术协调，住院医疗垫付，住院津贴补助，异地转诊交通补助。
                </p>
              </div>
              <div className="guide_item">
                <img src={ic_medicine} alt="" />
                <p className="guide_item_text">用药指导，康复指导，专属理赔通道。</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="footer">
        <div className="btn">
          <span className="btn_phone">服务热线：400-068-8181</span>
          <span
            className="btn_insure"
            onClick={() => {
              submit()
              // modalRef.current.toggle(true);
            }}>
            去续保
          </span>
        </div>
      </div>

      {visible ? <RenewalModal list={list} /> : null}
    </div>
  )
}

export default RedCardRenewal
